<template>
  <div class="settings-view">
    <div class="settings-header glass-card">
      <h1 class="page-title">设置</h1>
      <p class="page-subtitle">个性化您的家庭媒体管理体验</p>
    </div>

    <div class="settings-content">
      <div class="settings-sidebar">
        <div class="settings-search glass-card">
          <div class="search-input-wrapper">
            <svg class="search-icon" fill="none" viewBox="0 0 24 24">
              <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
              <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/>
            </svg>
            <input
              v-model="searchQuery"
              class="search-input"
              placeholder="搜索设置..."
              type="text"
            />
          </div>
        </div>
        <nav class="settings-nav glass-card">
          <button
            v-for="section in filteredSections"
            :key="section.key"
            :class="['nav-item', { active: activeSection === section.key }]"
            @click="activeSection = section.key"
          >
            <span class="nav-icon">{{ section.icon }}</span>
            <span class="nav-label">{{ section.label }}</span>
          </button>
        </nav>
      </div>

      <div class="settings-main">
        <!-- 个人资料设置 -->
        <div v-if="activeSection === 'profile'" class="settings-section glass-card">
          <h2 class="section-title">个人资料</h2>

          <div class="form-group">
            <label>头像</label>
            <div class="avatar-upload">
              <div class="avatar-preview">
                <img :src="userSettings.avatar || '/default-avatar.png'" alt="用户头像" />
              </div>
              <button class="upload-btn btn btn-outline" @click="uploadAvatar">
                更换头像
              </button>
            </div>
          </div>

          <div class="form-group">
            <label for="username">用户名</label>
            <input
              id="username"
              v-model="userSettings.username"
              class="form-input"
              type="text"
            />
          </div>

          <div class="form-group">
            <label for="email">邮箱</label>
            <input
              id="email"
              v-model="userSettings.email"
              class="form-input"
              type="email"
            />
          </div>

          <div class="form-group">
            <label for="nickname">昵称</label>
            <input
              id="nickname"
              v-model="userSettings.nickname"
              class="form-input"
              type="text"
            />
          </div>

          <div class="form-group">
            <label for="bio">个人简介</label>
            <textarea
              id="bio"
              v-model="userSettings.bio"
              class="form-textarea"
              placeholder="介绍一下自己..."
              rows="4"
            ></textarea>
          </div>
        </div>

        <!-- 外观设置 -->
        <div v-if="activeSection === 'appearance'" class="settings-section glass-card">
          <h2 class="section-title">外观设置</h2>

          <div class="form-group">
            <label>主题</label>
            <div class="theme-selector">
              <button
                v-for="theme in themes"
                :key="theme.value"
                :class="['theme-option', { active: userSettings.theme === theme.value }]"
                @click="selectTheme(theme.value)"
              >
                <div :class="theme.value" class="theme-preview">
                  <div class="theme-colors">
                    <span v-for="color in theme.colors" :key="color" :style="{ backgroundColor: color }"></span>
                  </div>
                </div>
                <span class="theme-name">{{ theme.name }}</span>
              </button>
            </div>
          </div>

          <div class="form-group">
            <label>语言</label>
            <select v-model="userSettings.language" class="form-select">
              <option value="zh-CN">简体中文</option>
              <option value="zh-TW">繁体中文</option>
              <option value="en-US">English</option>
            </select>
          </div>

          <div class="form-group">
            <label>字体大小</label>
            <div class="font-size-slider">
              <input
                v-model="userSettings.fontSize"
                class="slider"
                max="20"
                min="12"
                step="1"
                type="range"
              />
              <span class="font-size-value">{{ userSettings.fontSize }}px</span>
            </div>
          </div>

          <div class="form-group">
            <div class="checkbox-group">
              <label class="checkbox-label">
                <input v-model="userSettings.reducedMotion" type="checkbox" />
                <span class="checkmark"></span>
                减少动画效果
              </label>
              <label class="checkbox-label">
                <input v-model="userSettings.highContrast" type="checkbox" />
                <span class="checkmark"></span>
                高对比度模式
              </label>
            </div>
          </div>
        </div>

        <!-- 通知设置 -->
        <div v-if="activeSection === 'notifications'" class="settings-section glass-card">
          <h2 class="section-title">通知设置</h2>

          <div class="form-group">
            <div class="notification-item">
              <div class="notification-info">
                <h4>桌面通知</h4>
                <p>在桌面显示新消息通知</p>
              </div>
              <label class="toggle-switch">
                <input v-model="userSettings.notifications.desktop" type="checkbox" />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>

          <div class="form-group">
            <div class="notification-item">
              <div class="notification-info">
                <h4>邮件通知</h4>
                <p>通过邮件接收重要更新</p>
              </div>
              <label class="toggle-switch">
                <input v-model="userSettings.notifications.email" type="checkbox" />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>

          <div class="form-group">
            <div class="notification-item">
              <div class="notification-info">
                <h4>新上传提醒</h4>
                <p>家庭成员上传新媒体时通知</p>
              </div>
              <label class="toggle-switch">
                <input v-model="userSettings.notifications.newUploads" type="checkbox" />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>

          <div class="form-group">
            <div class="notification-item">
              <div class="notification-info">
                <h4>评论通知</h4>
                <p>有人评论您的内容时通知</p>
              </div>
              <label class="toggle-switch">
                <input v-model="userSettings.notifications.comments" type="checkbox" />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>
        </div>

        <!-- 隐私设置 -->
        <div v-if="activeSection === 'privacy'" class="settings-section glass-card">
          <h2 class="section-title">隐私设置</h2>

          <div class="form-group">
            <label>谁可以查看我的内容</label>
            <select v-model="userSettings.privacy.contentVisibility" class="form-select">
              <option value="family">仅家庭成员</option>
              <option value="friends">朋友</option>
              <option value="public">公开</option>
            </select>
          </div>

          <div class="form-group">
            <div class="checkbox-group">
              <label class="checkbox-label">
                <input v-model="userSettings.privacy.allowTagging" type="checkbox" />
                <span class="checkmark"></span>
                允许他人在照片中标记我
              </label>
              <label class="checkbox-label">
                <input v-model="userSettings.privacy.showOnlineStatus" type="checkbox" />
                <span class="checkmark"></span>
                显示在线状态
              </label>
              <label class="checkbox-label">
                <input v-model="userSettings.privacy.allowLocationSharing" type="checkbox" />
                <span class="checkmark"></span>
                分享地理位置信息
              </label>
            </div>
          </div>
        </div>

        <!-- 存储设置 -->
        <div v-if="activeSection === 'storage'" class="settings-section glass-card">
          <h2 class="section-title">存储设置</h2>

          <div class="storage-overview">
            <h4>存储使用情况</h4>
            <div class="storage-bar">
              <div :style="{ width: storageUsedPercentage + '%' }" class="storage-used"></div>
            </div>
            <div class="storage-info">
              <span>已使用 {{ formatFileSize(storageUsed) }} / {{ formatFileSize(storageTotal) }}</span>
              <span>{{ storageUsedPercentage }}%</span>
            </div>
          </div>

          <div class="storage-breakdown">
            <h4>存储分类</h4>
            <div class="storage-items">
              <div v-for="item in storageBreakdown" :key="item.type" class="storage-item">
                <span class="storage-type">{{ item.name }}</span>
                <span class="storage-size">{{ formatFileSize(item.size) }}</span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label>自动备份</label>
            <select v-model="userSettings.storage.autoBackup" class="form-select">
              <option value="never">从不</option>
              <option value="wifi">仅WiFi</option>
              <option value="always">始终</option>
            </select>
          </div>

          <div class="form-group">
            <button class="btn btn-outline" @click="cleanCache">
              🧹 清理缓存
            </button>
          </div>
        </div>

        <!-- 安全设置 -->
        <div v-if="activeSection === 'security'" class="settings-section glass-card">
          <h2 class="section-title">安全设置</h2>

          <div class="form-group">
            <button class="btn btn-outline" @click="changePassword">
              🔒 修改密码
            </button>
          </div>

          <div class="form-group">
            <div class="security-item">
              <div class="security-info">
                <h4>两步验证</h4>
                <p>为您的账户添加额外的安全保护</p>
              </div>
              <label class="toggle-switch">
                <input v-model="userSettings.security.twoFactorAuth" type="checkbox" />
                <span class="toggle-slider"></span>
              </label>
            </div>
          </div>

          <div class="form-group">
            <h4>登录设备</h4>
            <div class="device-list">
              <div v-for="device in loginDevices" :key="device.id" class="device-item">
                <div class="device-info">
                  <h5>{{ device.name }}</h5>
                  <p>{{ device.location }} · {{ formatDate(device.lastActive) }}</p>
                </div>
                <button class="btn btn-sm btn-danger" @click="removeDevice(device.id)">
                  移除
                </button>
              </div>
            </div>
          </div>
        </div>

        <div class="settings-actions">
          <button :disabled="saving" class="btn btn-primary" @click="saveSettings">
            {{ saving ? '保存中...' : '保存设置' }}
          </button>
          <button class="btn btn-outline" @click="resetSettings">
            重置为默认
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

const activeSection = ref('profile')
const saving = ref(false)
const searchQuery = ref('')

const settingSections = [
  { key: 'profile', label: '个人资料', icon: '👤' },
  { key: 'appearance', label: '外观', icon: '🎨' },
  { key: 'notifications', label: '通知', icon: '🔔' },
  { key: 'privacy', label: '隐私', icon: '🔒' },
  { key: 'storage', label: '存储', icon: '💾' },
  { key: 'security', label: '安全', icon: '🛡️' }
]

const userSettings = ref({
  username: '张三',
  email: 'zhangsan@example.com',
  nickname: '小张',
  bio: '喜欢摄影和旅行的家庭管理员',
  avatar: '',
  theme: 'light',
  language: 'zh-CN',
  fontSize: 16,
  reducedMotion: false,
  highContrast: false,
  notifications: {
    desktop: true,
    email: true,
    newUploads: true,
    comments: true
  },
  privacy: {
    contentVisibility: 'family',
    allowTagging: true,
    showOnlineStatus: true,
    allowLocationSharing: false
  },
  storage: {
    autoBackup: 'wifi'
  },
  security: {
    twoFactorAuth: false
  }
})

const themes = [
  {
    value: 'light',
    name: '浅色',
    colors: ['#ffffff', '#f3f4f6', '#6366f1']
  },
  {
    value: 'dark',
    name: '深色',
    colors: ['#1f2937', '#374151', '#6366f1']
  },
  {
    value: 'auto',
    name: '跟随系统',
    colors: ['#ffffff', '#1f2937', '#6366f1']
  }
]

const storageUsed = ref(2.5 * 1024 * 1024 * 1024) // 2.5GB
const storageTotal = ref(10 * 1024 * 1024 * 1024) // 10GB

const storageBreakdown = ref([
  { type: 'photos', name: '照片', size: 1.8 * 1024 * 1024 * 1024 },
  { type: 'videos', name: '视频', size: 0.5 * 1024 * 1024 * 1024 },
  { type: 'documents', name: '文档', size: 0.1 * 1024 * 1024 * 1024 },
  { type: 'cache', name: '缓存', size: 0.1 * 1024 * 1024 * 1024 }
])

const loginDevices = ref([
  {
    id: '1',
    name: 'iPhone 13',
    location: '北京',
    lastActive: new Date('2024-01-20')
  },
  {
    id: '2',
    name: 'MacBook Pro',
    location: '北京',
    lastActive: new Date('2024-01-19')
  }
])

const storageUsedPercentage = computed(() => {
  return Math.round((storageUsed.value / storageTotal.value) * 100)
})

const selectTheme = (theme: string) => {
  userSettings.value.theme = theme
}

const uploadAvatar = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/*'
  input.onchange = async (e: any) => {
    const file = e.target.files[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        userSettings.value.avatar = e.target?.result as string
      }
      reader.readAsDataURL(file)
    }
  }
  input.click()
}

const changePassword = () => {
  // TODO: 打开修改密码对话框
  const newPassword = prompt('请输入新密码:')
  if (newPassword && newPassword.length >= 6) {
    console.log('Password changed successfully')
    // 实际项目中应该调用API
  } else if (newPassword) {
    alert('密码长度至少6位')
  }
}

const removeDevice = (deviceId: string) => {
  if (confirm('确定要移除此设备吗？')) {
    const index = loginDevices.value.findIndex(device => device.id === deviceId)
    if (index > -1) {
      loginDevices.value.splice(index, 1)
      console.log('Device removed:', deviceId)
    }
  }
}

const cleanCache = async () => {
  if (confirm('确定要清理缓存吗？这将清理所有临时文件。')) {
    try {
      // 模拟清理缓存
      await new Promise(resolve => setTimeout(resolve, 1000))

      // 更新存储使用情况
      const cacheItem = storageBreakdown.value.find(item => item.type === 'cache')
      if (cacheItem) {
        storageUsed.value -= cacheItem.size
        cacheItem.size = 0
      }

      alert('缓存清理完成')
    } catch (error) {
      alert('清理缓存失败')
    }
  }
}

const saveSettings = async () => {
  saving.value = true
  try {
    // 验证设置
    if (!userSettings.value.username.trim()) {
      throw new Error('用户名不能为空')
    }

    if (!userSettings.value.email.trim()) {
      throw new Error('邮箱不能为空')
    }

    // 模拟保存设置到API
    console.log('Saving settings:', userSettings.value)
    await new Promise(resolve => setTimeout(resolve, 1500))

    alert('设置保存成功')
  } catch (error) {
    console.error('Save failed:', error)
    alert(error instanceof Error ? error.message : '保存失败，请重试')
  } finally {
    saving.value = false
  }
}

const resetSettings = () => {
  if (confirm('确定要重置所有设置为默认值吗？此操作不可撤销。')) {
    userSettings.value = {
      username: '',
      email: '',
      nickname: '',
      bio: '',
      avatar: '',
      theme: 'light',
      language: 'zh-CN',
      fontSize: 16,
      reducedMotion: false,
      highContrast: false,
      notifications: {
        desktop: true,
        email: false,
        newUploads: true,
        comments: true
      },
      privacy: {
        contentVisibility: 'family',
        allowTagging: true,
        showOnlineStatus: true,
        allowLocationSharing: false
      },
      storage: {
        autoBackup: 'wifi'
      },
      security: {
        twoFactorAuth: false
      }
    }
    console.log('Settings reset to defaults')
  }
}

const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatDate = (date: Date) => {
  return date.toLocaleDateString('zh-CN')
}

const filteredSections = computed(() => {
  if (!searchQuery.value.trim()) {
    return settingSections
  }

  const query = searchQuery.value.toLowerCase()
  return settingSections.filter(section =>
    section.label.toLowerCase().includes(query) ||
    section.key.toLowerCase().includes(query)
  )
})
</script>

<style lang="scss" scoped>
.settings-view {
  padding: $spacing-6;
  max-width: 1200px;
  margin: 0 auto;
}

.settings-header {
  text-align: center;
  padding: $spacing-8;
  margin-bottom: $spacing-6;

  .page-title {
    font-size: $font-size-3xl;
    font-weight: $font-weight-bold;
    color: $gray-800;
    margin-bottom: $spacing-2;
  }

  .page-subtitle {
    color: $gray-600;
    font-size: $font-size-base;
    margin: 0;
  }
}

.settings-content {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: $spacing-6;
}

.settings-search {
  padding: $spacing-4;
  margin-bottom: $spacing-4;

  .search-input-wrapper {
    position: relative;

    .search-icon {
      position: absolute;
      left: $spacing-3;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      color: $gray-400;
      pointer-events: none;
    }

    .search-input {
      width: 100%;
      padding: $spacing-3 $spacing-3 $spacing-3 45px;
      border: 2px solid rgba($gray-300, 0.5);
      border-radius: $radius-lg;
      background: rgba(255, 255, 255, 0.5);
      font-size: $font-size-sm;

      &:focus {
        outline: none;
        border-color: $primary-500;
      }

      &::placeholder {
        color: $gray-400;
      }
    }
  }
}

.settings-nav {
  padding: $spacing-4;
  height: fit-content;

  .nav-item {
    display: flex;
    align-items: center;
    gap: $spacing-3;
    width: 100%;
    padding: $spacing-3 $spacing-4;
    border: none;
    background: none;
    border-radius: $radius-lg;
    cursor: pointer;
    transition: all $duration-normal ease;
    margin-bottom: $spacing-2;

    &:hover {
      background: rgba(255, 255, 255, 0.5);
    }

    &.active {
      background: rgba($primary-500, 0.1);
      color: $primary-700;
    }

    .nav-icon {
      font-size: $font-size-lg;
    }

    .nav-label {
      font-weight: $font-weight-medium;
    }
  }
}

.settings-section {
  padding: $spacing-8;
  margin-bottom: $spacing-6;

  .section-title {
    font-size: $font-size-2xl;
    font-weight: $font-weight-bold;
    color: $gray-800;
    margin-bottom: $spacing-6;
  }

  .form-group {
    margin-bottom: $spacing-6;

    label {
      display: block;
      margin-bottom: $spacing-3;
      font-weight: $font-weight-semibold;
      color: $gray-700;
    }
  }

  .form-input, .form-select, .form-textarea {
    width: 100%;
    padding: $spacing-3;
    border: 2px solid rgba($gray-300, 0.5);
    border-radius: $radius-lg;
    background: rgba(255, 255, 255, 0.5);

    &:focus {
      outline: none;
      border-color: $primary-500;
    }
  }
}

.avatar-upload {
  display: flex;
  align-items: center;
  gap: $spacing-4;

  .avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: $radius-full;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.theme-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: $spacing-4;

  .theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $spacing-3;
    padding: $spacing-4;
    border: 2px solid rgba($gray-300, 0.3);
    border-radius: $radius-lg;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all $duration-normal ease;

    &:hover {
      transform: translateY(-2px);
    }

    &.active {
      border-color: $primary-500;
      background: rgba($primary-500, 0.1);
    }

    .theme-preview {
      width: 60px;
      height: 40px;
      border-radius: $radius-md;
      overflow: hidden;
      border: 1px solid rgba($gray-300, 0.5);

      .theme-colors {
        display: flex;
        height: 100%;

        span {
          flex: 1;
        }
      }
    }

    .theme-name {
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
    }
  }
}

.font-size-slider {
  display: flex;
  align-items: center;
  gap: $spacing-4;

  .slider {
    flex: 1;
  }

  .font-size-value {
    min-width: 50px;
    text-align: center;
    font-weight: $font-weight-medium;
  }
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: $spacing-3;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: $spacing-3;
  cursor: pointer;

  input[type="checkbox"] {
    width: auto;
  }

  .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid rgba($gray-300, 0.5);
    border-radius: $radius-sm;
    position: relative;

    &::after {
      content: '✓';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $primary-500;
      opacity: 0;
      font-size: $font-size-sm;
      font-weight: $font-weight-bold;
    }
  }

  input:checked + .checkmark::after {
    opacity: 1;
  }
}

.notification-item, .security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $spacing-4;
  border: 1px solid rgba($gray-300, 0.3);
  border-radius: $radius-lg;

  .notification-info, .security-info {
    h4 {
      font-size: $font-size-base;
      font-weight: $font-weight-semibold;
      color: $gray-800;
      margin-bottom: $spacing-1;
    }

    p {
      color: $gray-600;
      font-size: $font-size-sm;
      margin: 0;
    }
  }
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;

  input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($gray-400, 0.5);
    transition: $duration-normal;
    border-radius: 24px;

    &::before {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      left: 2px;
      top: 2px;
      background-color: white;
      transition: $duration-normal;
      border-radius: 50%;
    }
  }

  input:checked + .toggle-slider {
    background-color: $primary-500;
  }

  input:checked + .toggle-slider::before {
    transform: translateX(26px);
  }
}

.storage-overview {
  margin-bottom: $spacing-6;

  h4 {
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: $gray-800;
    margin-bottom: $spacing-3;
  }

  .storage-bar {
    height: 12px;
    background: rgba($gray-300, 0.3);
    border-radius: $radius-full;
    overflow: hidden;
    margin-bottom: $spacing-2;

    .storage-used {
      height: 100%;
      background: $primary-500;
      transition: width $duration-normal ease;
    }
  }

  .storage-info {
    display: flex;
    justify-content: space-between;
    font-size: $font-size-sm;
    color: $gray-600;
  }
}

.storage-breakdown {
  margin-bottom: $spacing-6;

  h4 {
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: $gray-800;
    margin-bottom: $spacing-3;
  }

  .storage-items {
    .storage-item {
      display: flex;
      justify-content: space-between;
      padding: $spacing-2 0;
      border-bottom: 1px solid rgba($gray-300, 0.3);

      .storage-type {
        color: $gray-700;
      }

      .storage-size {
        color: $gray-500;
        font-size: $font-size-sm;
      }
    }
  }
}

.device-list {
  .device-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $spacing-4;
    border: 1px solid rgba($gray-300, 0.3);
    border-radius: $radius-lg;
    margin-bottom: $spacing-3;

    .device-info {
      h5 {
        font-size: $font-size-base;
        font-weight: $font-weight-semibold;
        color: $gray-800;
        margin-bottom: $spacing-1;
      }

      p {
        color: $gray-600;
        font-size: $font-size-sm;
        margin: 0;
      }
    }
  }
}

.settings-actions {
  display: flex;
  gap: $spacing-4;
  padding-top: $spacing-6;
  border-top: 1px solid rgba($gray-300, 0.3);
}

@media (max-width: 1024px) {
  .settings-view {
    padding: 1.5rem;
  }

  .settings-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .settings-search {
    padding: 1rem;
    margin-bottom: 1rem;

    .search-input-wrapper {
      .search-icon {
        width: 16px;
        height: 16px;
        left: 0.75rem;
      }

      .search-input {
        padding: 0.75rem 0.75rem 0.75rem 40px;
        font-size: 0.9rem;
      }
    }
  }

  .settings-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    padding: 1rem;

    .nav-item {
      justify-content: center;
      padding: 0.75rem;
      margin-bottom: 0;

      .nav-icon {
        font-size: 1.1rem;
      }

      .nav-label {
        font-size: 0.9rem;
      }
    }
  }

  .theme-selector {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .settings-view {
    padding: 1rem;
  }

  .settings-header {
    padding: 1.5rem;

    .page-title {
      font-size: 1.75rem;
    }

    .page-subtitle {
      font-size: 0.9rem;
    }
  }

  .settings-content {
    gap: 1rem;
  }

  .settings-search {
    padding: 0.75rem;
    margin-bottom: 0.75rem;

    .search-input-wrapper {
      .search-icon {
        width: 14px;
        height: 14px;
        left: 0.6rem;
      }

      .search-input {
        padding: 0.6rem 0.6rem 0.6rem 35px;
        font-size: 0.85rem;
      }
    }
  }

  .settings-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;

    .nav-item {
      flex-direction: column;
      gap: 0.5rem;
      padding: 0.75rem 0.5rem;
      text-align: center;

      .nav-icon {
        font-size: 1.2rem;
      }

      .nav-label {
        font-size: 0.8rem;
        font-weight: 500;
      }
    }
  }

  .settings-section {
    padding: 1.5rem;

    .section-title {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .form-group {
      margin-bottom: 1.5rem;

      label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
      }

      .form-input, .form-select, .form-textarea {
        padding: 0.75rem;
        font-size: 0.9rem;
      }
    }
  }

  .avatar-upload {
    gap: 1rem;

    .avatar-preview {
      width: 70px;
      height: 70px;
    }
  }

  .theme-selector {
    grid-template-columns: 1fr;
    gap: 0.75rem;

    .theme-option {
      padding: 1rem;

      .theme-preview {
        width: 50px;
        height: 30px;
      }

      .theme-name {
        font-size: 0.85rem;
      }
    }
  }

  .font-size-slider {
    gap: 1rem;

    .slider {
      height: 6px;
    }

    .font-size-value {
      min-width: 45px;
      font-size: 0.9rem;
    }
  }

  .checkbox-group {
    gap: 1rem;
  }

  .checkbox-label {
    gap: 0.75rem;

    .checkmark {
      width: 18px;
      height: 18px;
    }
  }

  .notification-item, .security-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;

    .notification-info, .security-info {
      h4 {
        font-size: 0.95rem;
        margin-bottom: 0.25rem;
      }

      p {
        font-size: 0.85rem;
      }
    }
  }

  .toggle-switch {
    width: 45px;
    height: 22px;

    .toggle-slider::before {
      height: 18px;
      width: 18px;
    }

    input:checked + .toggle-slider::before {
      transform: translateX(23px);
    }
  }

  .storage-overview {
    margin-bottom: 1.5rem;

    h4 {
      font-size: 1rem;
      margin-bottom: 0.75rem;
    }

    .storage-bar {
      height: 10px;
      margin-bottom: 0.5rem;
    }

    .storage-info {
      font-size: 0.85rem;
      flex-direction: column;
      gap: 0.25rem;
    }
  }

  .storage-breakdown {
    margin-bottom: 1.5rem;

    h4 {
      font-size: 1rem;
      margin-bottom: 0.75rem;
    }

    .storage-items .storage-item {
      padding: 0.75rem 0;

      .storage-type {
        font-size: 0.9rem;
      }

      .storage-size {
        font-size: 0.8rem;
      }
    }
  }

  .device-list .device-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;

    .device-info {
      h5 {
        font-size: 0.95rem;
        margin-bottom: 0.25rem;
      }

      p {
        font-size: 0.85rem;
      }
    }
  }

  .settings-actions {
    flex-direction: column;
    gap: 0.75rem;

    .btn {
      width: 100%;
      justify-content: center;
    }
  }
}

@media (max-width: 480px) {
  .settings-view {
    padding: 0.75rem;
  }

  .settings-header {
    padding: 1.25rem;

    .page-title {
      font-size: 1.5rem;
    }

    .page-subtitle {
      font-size: 0.85rem;
    }
  }

  .settings-search {
    padding: 0.6rem;
    margin-bottom: 0.6rem;

    .search-input-wrapper {
      .search-icon {
        width: 12px;
        height: 12px;
        left: 0.5rem;
      }

      .search-input {
        padding: 0.5rem 0.5rem 0.5rem 30px;
        font-size: 0.8rem;
      }
    }
  }

  .settings-nav {
    grid-template-columns: 1fr;

    .nav-item {
      padding: 0.75rem;

      .nav-icon {
        font-size: 1.1rem;
      }

      .nav-label {
        font-size: 0.9rem;
      }
    }
  }

  .settings-section {
    padding: 1.25rem;

    .section-title {
      font-size: 1.35rem;
      margin-bottom: 1.25rem;
    }

    .form-group {
      margin-bottom: 1.25rem;

      label {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
      }

      .form-input, .form-select, .form-textarea {
        padding: 0.6rem;
        font-size: 0.85rem;
      }
    }
  }

  .avatar-upload {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;

    .avatar-preview {
      width: 60px;
      height: 60px;
    }
  }

  .theme-selector {
    .theme-option {
      padding: 0.75rem;

      .theme-preview {
        width: 40px;
        height: 25px;
      }

      .theme-name {
        font-size: 0.8rem;
      }
    }
  }

  .font-size-slider {
    .font-size-value {
      min-width: 40px;
      font-size: 0.85rem;
    }
  }

  .checkbox-label {
    .checkmark {
      width: 16px;
      height: 16px;
    }
  }

  .notification-item, .security-item {
    padding: 0.75rem;

    .notification-info, .security-info {
      h4 {
        font-size: 0.9rem;
      }

      p {
        font-size: 0.8rem;
      }
    }
  }

  .toggle-switch {
    width: 40px;
    height: 20px;

    .toggle-slider::before {
      height: 16px;
      width: 16px;
    }

    input:checked + .toggle-slider::before {
      transform: translateX(20px);
    }
  }

  .storage-overview {
    .storage-bar {
      height: 8px;
    }

    .storage-info {
      font-size: 0.8rem;
    }
  }

  .storage-breakdown {
    .storage-items .storage-item {
      .storage-type {
        font-size: 0.85rem;
      }

      .storage-size {
        font-size: 0.75rem;
      }
    }
  }

  .settings-actions {
    .btn {
      padding: 0.75rem;
      font-size: 0.9rem;
    }
  }
}
</style>
